<template>
    <div class="container">
        <div class="content">
            <img :src="props.img" class="image">
            <h3>{{ props.title }}</h3>
        </div>
    </div>
</template>
  

<script lang="ts" setup name="">
    const props = defineProps({
        title:{
            type:String,
            required: true
        },
        
        img:{
            type: String,
            required: true
        }
    })
</script>

<style scoped lang="scss">
    .container{
        width: 25vw;
        height: 25vw;
        display: flex;
        justify-content: center;
        .content{
            padding: 2vw 2.5vw 1vw 2.5vw ;
            width: 25vw;
            .image{
                border-radius: 1.0vw;
                width: 20vw;
                height: 15vw;               
                display: flex;
            }
            h3{
                text-align: center;
                width: 20vw;
                margin-top: 1vw;
                margin-bottom: 1vw;
            }
            
        }
    }
</style>
